<script setup lang="ts">
import { Ref, ref, reactive } from 'vue'
import { FDialog } from '@base-comp'
import Service from '@apis/auth'
import { ElMessage } from 'element-plus'
import type { FormRules, FormInstance } from 'element-plus'
import { labelPositionType, formData } from '#types/login'
import md5 from '@utils/md5'

const form: Ref<formData> = ref({
  loginName: '',
  userName: '',
  password: '',
  checkword: ''
})


const labelPosition: Ref<labelPositionType> = ref(labelPositionType.right)

const validatePass = (_rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.value.password) {
    callback(new Error("两次输入密码不一致"))
  } else {
    callback()
  }
}

const rules = reactive<FormRules>({
  userName: [
  { required: true, message: '请输入用户昵称', trigger: 'blur' }
  ],
  loginName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { pattern: /^[A-Za-z]/, message: '用户名必须以字母开头' },
    { min: 3, max: 12, message: '用户名长度介于3-12位' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度介于6-18位' },
    { pattern: /[A-Za-z]/, message: '必须有一个字母 ' }
  ],
  checkword: [{ validator: validatePass, trigger: 'blur' }]
})


const visabled: Ref<boolean> = ref(false)
const show = (): void => {
  visabled.value = true
}
const hide = (): void => {
  visabled.value = false
}

const randomNick = async () => {
  const result = await Service.getRandomNickName()
  form.value.userName = result as unknown as string
}

const formRef = ref<FormInstance>()
const doSignUp =  () => {
  formRef.value?.validate(async (valid) => {
    if (!valid) return
    await Service.signUp({
    userName: form.value.userName,
    loginName: form.value.loginName,
    password: md5(form.value.password)
})
    ElMessage.success('注册成功')
    hide()
  })
}
defineExpose({
  show,
  hide
})
</script>

<template>
  <f-dialog title="注册" v-model="visabled" @handleCancel="hide" @handle-success="doSignUp" width="500px">
    <el-form :label-position="labelPosition" :model="form" label-width="100px" :rules="rules" ref="formRef">
      <el-form-item prop="userName" label="用户昵称">
        <el-input v-model="form.userName" placeholder="请输入用户昵称" allow-clear size="large">
          <template #suffix>
            <el-button type="text" @click="randomNick">随机</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="loginName" label="登录用户名">
        <el-input v-model="form.loginName" placeholder="请输入登录用户名" allow-clear size="large" />
      </el-form-item>
      <el-form-item prop="password" label="登录密码">
        <el-input
          v-model="form.password"
          placeholder="请输入登录密码"
          type="password"
          allow-clear
          size="large"
        />
      </el-form-item>
      <el-form-item prop="checkword" style="margin-bottom: 0px" label="确认密码">
        <el-input
          v-model="form.checkword"
          placeholder="请确认密码"
          type="password"
          allow-clear
          size="large"
        />
      </el-form-item>
    </el-form>
  </f-dialog>
</template>
